<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/elementui.css">
  <link rel="stylesheet" href="css/login.css">
  <script src="js/vue.js"></script>
  <script src="js/elementui.js"></script>
  <title>登录</title>
</head>
<body>
  <div id="app" v-cloak class="back">
    <div class="title">
      <img name="logo" src="../view/img/logo-white.png">
      <span name="appName">天命图</span>
      <div class="operate">
        <i class="el-icon-setting" @click="settingView(true)"></i>
        <i class="el-icon-close" @click="close"></i>
      </div>
    </div>
    <div class="container" ref="container">
      <div class="back blur" ref="blur"></div>
      <div v-if="openSetting" class="setting">
        <h4><i class="el-icon-back back-login" @click="settingView(false)"></i>设置代理</h4>
        <el-select placeholder="协议类型" v-model="setting.protocol" style="padding-bottom: 20px;width: 100px;">
          <el-option label="http://" value="http://"></el-option>
          <el-option label="https://" value="https://"></el-option>
        </el-select>
        <el-input placeholder="服务地址" v-model="setting.host"></el-input>
      </div>
      <div v-else>
        <div class="avatar">
          <el-avatar size="large" :src="headImage || '../view/img/avatar.png'"></el-avatar>
        </div>
        <div class='from'>
          <el-autocomplete
            v-model="username"
            :fetch-suggestions="querySearchUser"
            @select="selectUser"
            placeholder="请输入账号"
          ></el-autocomplete>
          <i ref="login" class="login el-icon-right" @click="login"></i>
          <el-input
            placeholder="请输入密码"
            v-model="password"
            type="password"
            suffix-icon="el-icon-right"
            class="password"
            @keyup.enter.native="login"
          ></el-input>
          <div class="from-warn">
            <i ref="warnIcon"></i>
            <span ref="warn"></span>
          </div>
          <div class="from-bottom">
            <el-checkbox v-model="rember">记住密码</el-checkbox>
            <el-checkbox v-model="autoLogin">自动登录</el-checkbox>
            <span>忘记密码</span>
            <span>注册账号</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="js/login.js"></script>
</body>
</html>